<template>
  <div>
    <div class="screening2-listdetail" v-if="screeningList.length">
      <div class="one">
        <span>{{detailInfo.id}}</span>
        <span>{{detailInfo.time.split(' ').pop()}}</span>
      </div>
      <div class="two" @click="showImage(detailInfo.image)">
        <img :src="detailInfo.image" alt="">
        <p>{{detailInfo.mode==0?'左眼':'右眼'}}</p>
      </div>
      <div class="three">
        <span>姓名:<em>{{detailInfo.name}}</em></span>
        <span>年龄:<em>{{detailInfo.age}}</em></span>
        <span>电话:<em>{{detailInfo.telephone}}</em></span>
        <span>家族病史:<em>{{detailInfo.medical_history}}</em></span>
      </div>
      <div class="three">
        <span>病历号:<em>{{detailInfo.medical_num}}</em></span>
        <span>模式:<em>{{detailInfo.mode==0?'左眼':'右眼'}}</em></span>
        <span class="status">状态:
                    <em v-if="detailInfo.status == 0" style="color:rgb(234, 0, 64);">待开始</em>
                    <em v-if="detailInfo.status == 2" style="color:rgb(213, 168, 0);">筛查中</em>
                    <em v-if="detailInfo.status == 1" style="color:rgb(79, 199, 130);">已完成</em>
                </span>
        <span class="mode">操作:<em class="start" @click="start(detailInfo)"
                                  v-if="detailInfo.status==0">开始</em><em
          v-if="detailInfo.status==0">|</em><em
          class="detail" @click="getDetail(detailInfo)" v-if="detailInfo.status==1">详情</em><em
          v-if="detailInfo.status==1">|</em><em
          class="delete" @click="deleteItem(detailInfo)">删除</em></span>
      </div>
      <div class="three">
        <span>初步检测结果:<em class="result">{{detailInfo.result}}</em></span>
      </div>
    </div>
    <div class="screening2-autoupload">
      <button class="image-upload">
        <span>批量眼底筛查</span>
        <form><input type="file" multiple @change="onFileChange" accept="image/*"></form>
      </button>
      <span class="auto-screen">自动筛查<i-switch v-model="auto_screen" @on-change="autoScreen"/></span>
    </div>
    <div class="screening2-container" ref="screening_container"
         :style="{maxHeight:clientHeight + 'px',width:clientWidth + 'px' }" v-if="screeningList.length">
      <div>
        <p class="screening2-item">
          <span class="one"></span>
          <span class="one">用户</span>
          <span class="one">图像</span>
          <span class="two">病历号</span>
          <span class="one">模式</span>
          <span class="one">状态</span>
          <span class="two">操作</span>
        </p>
        <div class="screening2-list" v-for="(item,index) in screeningList" @click="showDetail(item)">
          <div class="left">
            <span>{{item.id}}</span>
            <span>{{item.time.split(' ').pop()}}</span>
          </div>
          <div class="right">
            <span class="one update-info" @click="updateInfo(item)">{{item.name}}</span>
            <span class="one" @click="showImage(item.image)"><img :src="item.image" alt=""></span>
            <span class="two"><input type="text" maxlength="20" placeholder="在此输入病历号"
                                     v-model="item.medical_num"
                                     :ref="'input'+index" :key="index"
                                     @blur="updateMedicalNum(item.medical_num,item.image_id)"
                                     @focus="getMedicalNum(item.medical_num,index)"></span>
            <span class="one change-mode" @click="changeMode(item)">{{item.mode==0?'左眼':'右眼'}}</span>
            <span class="one start" v-if="item.status==0">待开始</span>
            <span class="one screening" v-if="item.status==2">筛查中</span>
            <span class="one finish" v-if="item.status==1">已完成</span>
            <span class="two"><em @click="start(item)" v-if="item.status==0" class="start-red">开始</em><em
              v-if="item.status==0">|</em><em
              @click="getDetail(item)" v-if="item.status==1" class="start-red">详情</em><em
              v-if="item.status==1">|</em><em @click="deleteItem(item)">删除</em></span>
          </div>
        </div>
      </div>
    </div>
    <Modal v-model="visible">
      <img :src="showImgUrl" v-if="visible" alt="" style="width: 100%;">
    </Modal>
    <Modal
      v-model="modal1"
      title="信息录入"
      class-name="screening2-infoform"
      ok-text="保存"
      @on-ok="confirm"
      @on-cancel="cancel">
      <div class="screening2-info">
        <p>
          <span><em>*</em>身份证号：<input type="number" v-model="userDetailInfo.identify_num"
                                      v-on:input="limitNum(0,userDetailInfo.identify_num)"></span>
          <span><em>*</em>性&emsp;&emsp;别：
              <Select v-model="userDetailInfo.gender" style="width: auto;display: block">
                <Option v-for="item in genderList" :value="item.label" :key="item.value">{{item.label}}</Option>
              </Select>
            </span>
        </p>
        <p>
          <span><em>*</em>姓&emsp;&emsp;名：<input type="text" v-model="userDetailInfo.name"></span>
          <span>
              <em>*</em>出生日期：
              <DatePicker type="date" placeholder="请选择" :value="userDetailInfo.birth_date"
                          @on-change="getDate(userDetailInfo,$event)"
                          format="yyyy-MM-dd" style="width: 100%;"></DatePicker>
            </span>
        </p>
        <p>
          <span><em>*</em>手&nbsp;&nbsp;机&nbsp;&nbsp;号：<input type="number" v-model="userDetailInfo.telephone"
                                                             v-on:input="limitNum(1,userDetailInfo.telephone)"></span>
          <span>
              <em>*</em>籍&emsp;&emsp;贯：<Cascader :data="nativePlace" v-model="userDetailInfo.birth_place" filterable
                                                 style="width: 100%;display: inline-block"></Cascader>
            </span>
        </p>
        <p>
          <span>家族病史：<input type="text" v-model="userDetailInfo.medical_history"></span>
        </p>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="modal1=false">取消</Button>
        <Button type="primary" size="large" @click="confirm">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  // const ipcRender = require('electron').ipcRenderer;
  import axios from 'axios';
  import {apiPre, windowOpenUrl} from "../js/config";
  import BScroll from 'better-scroll';
  import event from '../components/event';
  import {getBirthPlace} from "../js/utils";

  export default {
    name: "screening2",
    data() {
      return {
        screeningList: [],
        visible: false,
        showImgUrl: '',
        screening_scroll: '',
        scrollY: 0,
        clientHeight: 0,
        clientWidth: 0,
        detailInfo: {
          number: '',
          time: '',
          name: '',
          image: '',
          mode: 0,
          status: 0,
          age: 0,
          telephone: 0,
          medical_history: '',
          id: 0,
          result: ''
        },
        auto_screen: false,
        oldMedicalNum: '',
        modal1: false,
        name: '',
        gender: '',
        birthDate: '',
        birth_place: [],
        cardNum: '',
        telephone: '',
        age: '',
        genderList: [
          {
            value: 0,
            label: '男'
          },
          {
            value: 1,
            label: '女'
          }
        ],
        nativePlace: [],
        dateValue: '',
        history: '',
        userDetailInfo: {},
        waitingScreeningList: [],
        finishScreeningList: 0,
        underScreeningList: 0,
        deleteModal: true
      }
    },
    methods: {
      debounce(func, delay) {
        let timer;
        return function (...args) {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
            func.apply(this, args)
          }, delay)
        }
      },
      limitNum(num, item) {
        console.log(num);
        if (num == 0) {
          if (this.userDetailInfo.identify_num.length > 18) {
            this.userDetailInfo.identify_num = item.slice(0, 18);
            return;
          }
        }
        if (num == 1) {
          if (this.userDetailInfo.telephone.length > 11) {
            this.userDetailInfo.telephone = item.slice(0, 11);
            return;
          }
        }
      },
      deleteList() {
        console.log('delete');
      },
      deleteItem(obj) {
        console.log(obj);
        if (obj.status == 2) {
          return;
        } else if (obj.status == 0) {
          this.screeningList.forEach((item, index) => {
            if (this.screeningList[index].id == obj.id) {
              this.screeningList.splice(index, 1);
              window.sessionStorage.setItem('screeningList', JSON.stringify(this.screeningList));
            }
          })
          this.waitingScreeningList.forEach((item, index) => {
            if (this.waitingScreeningList[index].id == obj.id) {
              this.waitingScreeningList.splice(index, 1);
              window.localStorage.setItem('waitingScreeningList', JSON.stringify(this.waitingScreeningList))
            }
          })
          axios.delete(apiPre + 'tasks', {data: obj}).then((res) => {
            console.log('delete res', res)
          }).catch((err) => {
            console.log('delete err', err);
          })
        } else {
          this.screeningList.forEach((item, index) => {
            if (this.screeningList[index].id == obj.id) {
              this.screeningList.splice(index, 1);
              window.sessionStorage.setItem('screeningList', JSON.stringify(this.screeningList));
            }
          })
        }
      },
      getDate(obj, e) {
        this.birthDate = e
        obj.birth_date = e;
      },
      updateInfo(item) {
        if (item.status == 1) {
          // this.$Message
        }
        console.log('this.userDetailInfo', this.userDetailInfo);
        this.userDetailInfo = item;
        this.modal1 = true;
      },
      cancel() {
        console.log('cancel');
      },
      codeNumberVerify(num) {
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(num) === false) {
          return false;
        } else {
          return true;
        }
      },
      telephoneVerify(num) {
        var reg = /^1(3|4|5|7|8)\d{9}$/;
        if (reg.test(num) === false) {
          return false;
        } else {
          return true;
        }
      },
      computeAge(time) {
        var year = new Date().getFullYear();
        var month = new Date().getMonth() + 1;
        var date = new Date().getDate();
        var birth = time.split('-');
        var age = year - birth[0];
        if (month > birth[1]) {
          return age;
        } else if (month < birth[1]) {
          return age - 1;
        } else {
          if (date >= birth[2]) {
            return age;
          } else {
            return age - 1;
          }
        }
      },
      confirm() {
        console.log('confirm', this.userDetailInfo);
        if (this.userDetailInfo.birth_date) {
          this.userDetailInfo.age = this.computeAge(this.userDetailInfo.birth_date);
        }
        //身份证号验证
        if (this.userDetailInfo.identify_num && !this.codeNumberVerify(this.userDetailInfo.identify_num)) {
          this.$Message.info({content: '请输入正确的身份证号'});
          return;
        }
        //电话号码验证
        if (this.userDetailInfo.telephone && !this.telephoneVerify(this.userDetailInfo.telephone)) {
          this.$Message.info({content: '请输入正确的电话号码'});
          return;
        }
        // if (!this.userDetailInfo.name || !this.userDetailInfo.telephone || !this.userDetailInfo.gender || !this.userDetailInfo.birth_date || !this.userDetailInfo.identify_num || this.userDetailInfo.birth_place.length == 0) {
        //     this.$Message.info({content: '请完善基本信息'});
        //     return;
        // }
        // if (!this.userDetailInfo.identify_num) {
        //   this.modal1 = true;
        //   this.$Message.info({content: '不关闭'});
        //   return;
        // } else {
        //   this.modal1 = false;
        //   this.$Message.info({content: '关闭'});
        //   return;
        // }
        var data = {};
        for (var i in this.userDetailInfo) {
          if (i == 'birth_place') {
            data[i] = this.userDetailInfo[i][0] + this.userDetailInfo[i][1];
          } else {
            data[i] = this.userDetailInfo[i]
          }
        }
        console.log('users data', data);
        axios.put(apiPre + 'users', {info: data}).then((res) => {
          console.log(res);
          // this.userDetailInfo.owner_id = res.data.data;
          console.log('updateInfo', this.screeningList);
          this.modal1 = false;
          this.$Message.info({content: '保存成功'});
          window.sessionStorage.setItem('screeningList', JSON.stringify(this.screeningList));
        }).catch((err) => {
          console.log(err)
        })
      },
      getMedicalNum(num, index) {
        this.oldMedicalNum = num;
      },
      updateMedicalNum(num, id) {
        if (this.oldMedicalNum != num) {
          axios.post(apiPre + 'medicalNum', {
            medicalNum: num,
            imageId: id
          }).then((res) => {
            console.log('updateMedicalNum', this.screeningList);
            window.sessionStorage.setItem('screeningList', JSON.stringify(this.screeningList));
          }).catch((err) => {

          })
        }
      },
      _initScroll() {
        this.screening_scroll = new BScroll(this.$refs.screening_container, {
          probeType: 3,     //实时监控滑动距离
          mouseWheel: true,  //鼠标滑动
          momentumLimitDistance: 0,
          bounce: false,   //禁止回弹
          scrollbar: {
            fade: false,    //显示滚动条
            interactive: true   //按住滑动条实现滑动
          }
        })
        // this.screening_scroll.on('scroll', (pos) => {
        //     this.scrollY = Math.abs(Math.round(pos.y))
        //     var num = (this.scrollY - 35) / 85;
        //     this.detailInfo = this.screeningList[parseInt(num)];
        // })
      },
      changeMode(obj) {
        console.log('changeMode', obj);
        obj.mode = obj.mode ? 0 : 1;
      },
      showImage(url) {
        this.visible = !this.visible;
        this.showImgUrl = url;
      },
      start(item) {
        this.underScreeningList = parseInt(window.localStorage.getItem('underScreeningList'));
        if (this.underScreeningList == 1) {
          return;
        } else {
          this.underScreeningList = 1;
          window.localStorage.setItem('underScreeningList', this.underScreeningList);
          console.log('start screnning', item)
          item.status = 2;
          window.sessionStorage.setItem('screeningList', JSON.stringify(this.screeningList));
          axios.post(apiPre + 'screening2', {
            image_id: item.image_id,
            owner_id: item.owner_id,
            image_url: item.image,
            status: item.status,
            type: item.mode,
            medical_num: item.medical_num
          }).then((res) => {
            console.log('screening new', res);
            if (res.data.status == 2) {
              item.status = 1;
              this.underScreeningList = 0;
              window.localStorage.setItem('underScreeningList', this.underScreeningList);
              if (this.auto_screen) {
                this.finishScreeningList++;
              }
              console.log('leave page 255555555555')
              var len = this.waitingScreeningList.length;
              for (var i = 0; i < len; i++) {
                if (this.waitingScreeningList[i].id == item.id) {
                  this.waitingScreeningList.splice(i, 1);
                  window.localStorage.setItem('waitingScreeningList', JSON.stringify(this.waitingScreeningList))
                  break;
                }
              }
              window.sessionStorage.setItem('screeningList', JSON.stringify(this.screeningList));
            } else {
              console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
              item.status = 0;
              window.sessionStorage.setItem('screeningList', JSON.stringify(this.screeningList));
              this.underScreeningList = 0;
              window.localStorage.setItem('underScreeningList', this.underScreeningList);
            }
          }).catch((err) => {
            console.log('yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy')
            item.status = 0;
            window.sessionStorage.setItem('screeningList', JSON.stringify(this.screeningList));
            this.underScreeningList = 0;
            window.localStorage.setItem('underScreeningList', this.underScreeningList);
          })
        }
      },
      getDetail(item) {
        console.log('getDetail', item);
        window.open(windowOpenUrl + item.medical_num);
      },
      showDetail(obj) {
        this.detailInfo = obj;
      },
      autoScreen() {
        //使用localStorage
        if (this.auto_screen) {
          console.log(this.auto_screen);
          if (this.waitingScreeningList.length) {
            this.screeningList.forEach((item, index) => {
              if (item.id == this.waitingScreeningList[0].id) {
                this.start(this.screeningList[index]);
              }
            })
          }
        }
        window.localStorage.setItem('auto_screen', this.auto_screen)
      },
      compare(obj1, obj2) {
        var val1 = obj1.medical_num;
        var val2 = obj2.medical_num;
        if (val1 < val2) {
          return 1;
        } else if (val1 > val2) {
          return -1;
        } else {
          return 0
        }
      },
      generateData(length,url,list,medicalNum,id) {
        return {
          id: length,
          time: new Date().toLocaleTimeString('chinese', {hour12: false}),
          name: '未命名' + length,
          image: url,
          mode: list.length ? (list[0].mode == 0 ? 1 : 0) : 0,
          status: 0,
          medical_num: medicalNum,
          image_id: id,
          gender: '',
          identify_num: null,
          birth_date: '',
          telephone: null,
          birth_place: [],
          medical_history: ''
        }
      },
      addList(arg) {
        axios.get(apiPre + 'image2').then((res) => {
          console.log('images', res);
          var len = res.data.data;
          console.log('len', len);
          if (Array.isArray(arg)) {
            console.log('array')
            arg.forEach((value, index) => {
              console.log('index', index);
              console.log('arg length', arg.length);
              var length = len - (arg.length - index) + 1;
              console.log('length', length)
              // var data = {
              //   id: length,
              //   time: new Date().toLocaleTimeString('chinese', {hour12: false}),
              //   name: '未命名' + length,
              //   image: value.url,
              //   mode: this.screeningList.length ? (this.screeningList[0].mode == 0 ? 1 : 0) : 0,
              //   status: 0,
              //   medical_num: value.medicalNum,
              //   image_id: value.id,
              //   gender: '',
              //   identify_num: null,
              //   birth_date: '',
              //   telephone: null,
              //   birth_place: [],
              //   medical_history: ''
              // }
              var data = this.generateData(length,value.url,this.screeningList,value.medicalNum,value.id)

              var newData = {};
              for (var i in data) {
                if (i == 'birth_place') {
                  newData[i] = '';
                } else {
                  newData[i] = data[i];
                }
              }
              console.log('newData.image_id', newData.image_id);
              axios.post(apiPre + 'users', {info: newData}).then((res) => {
                console.log('users result', res);
                data.owner_id = res.data.data;
                this.screeningList = this.screeningList ? this.screeningList : [];
                this.screeningList.unshift(data);
                this.waitingScreeningList.push(data);
                window.localStorage.setItem('waitingScreeningList', JSON.stringify(this.waitingScreeningList))
                var obj = JSON.stringify(this.screeningList)
                window.sessionStorage.setItem('screeningList', obj)
                window.sessionStorage.setItem('screeningNum', window.localStorage.getItem('screeningNum') ? parseInt(window.localStorage.getItem('screeningNum')) + 1 : 1)
                axios.post(apiPre + 'tasks', {
                  image_id: newData.image_id,
                  owner_id: res.data.data,
                }).then((res) => {
                  this.underScreeningList = parseInt(window.localStorage.getItem('underScreeningList'));
                  if (this.underScreeningList == 0 && this.auto_screen) {
                    this.finishScreeningList++;
                  }
                  console.log('tasks', res);
                }).catch((err) => {

                })
              }).catch((err) => {
                console.log(err);
              })
            })
          } else {
            console.log('normal')
            // var data = {
            //   id: len,
            //   time: new Date().toLocaleTimeString('chinese', {hour12: false}),
            //   name: '未命名' + len,
            //   image: arg.url,
            //   mode: this.screeningList.length ? (this.screeningList[0].mode == 0 ? 1 : 0) : 0,
            //   status: 0,
            //   medical_num: arg.medicalNum,
            //   image_id: arg.id,
            //   gender: '',
            //   identify_num: null,
            //   birth_date: '',
            //   telephone: null,
            //   birth_place: [],
            //   medical_history: ''
            // }
            var data = this.generateData(len,arg.url,this.screeningList,arg.medicalNum,arg.id)

            var newData = {};
            for (var i in data) {
              if (i == 'birth_place') {
                newData[i] = '';
              } else {
                newData[i] = data[i];
              }
            }
            axios.post(apiPre + 'users', {info: newData}).then((res) => {
              console.log('users result', res);
              data.owner_id = res.data.data;
              this.screeningList = this.screeningList ? this.screeningList : [];
              this.screeningList.unshift(data);
              console.log('this,screeningList new', this.screeningList)
              this.waitingScreeningList.push(data);
              window.localStorage.setItem('waitingScreeningList', JSON.stringify(this.waitingScreeningList))
              var obj = JSON.stringify(this.screeningList)
              window.sessionStorage.setItem('screeningList', obj)
              window.sessionStorage.setItem('screeningNum', window.localStorage.getItem('screeningNum') ? parseInt(window.localStorage.getItem('screeningNum')) + 1 : 1)
              axios.post(apiPre + 'tasks', {
                image_id: newData.image_id,
                owner_id: res.data.data,
              }).then((res) => {
                this.underScreeningList = parseInt(window.localStorage.getItem('underScreeningList'));
                if (this.underScreeningList == 0 && this.auto_screen) {
                  this.finishScreeningList++;
                }
              }).catch((err) => {

              })
            }).catch((err) => {
              console.log(err);
            })
          }
        }).catch((err) => {
          console.log('images', err);
        })
      },
      onFileChange(e) {
        var filearr = [];
        var files = e.target.files;
        for (var i = 0; i < files.length; i++) {
          filearr.push(files[i]);
        }
        var formData = new FormData();
        for (var i = 0; i < filearr.length; i++) {
          // console.log('filearr[i]', filearr[i]);
          formData.append("file", filearr[i]);
        }

        var config = {
          headers: {
            'Content-Type': 'multipart/form-data',
            "token": window.localStorage.getItem('screeningLogin')
          }
        }

        console.log('formData', formData.getAll('file'));

        // axios.post('http://202.197.66.62:20512/upload', formData, config).then((res) => {
        axios.post(apiPre + 'upload', formData, config).then((res) => {
          // this.addList(res.data)
          console.log(res.data)
          if (Array.isArray(res.data)) {
            var data = res.data.sort(this.compare)
            this.addList(data);
          } else {
            this.addList(res.data);
          }
          // console.log(data)
        }).catch((err) => {
          console.log(err)
        })
      },
      deepCopy(data) {
        var arr = new Array();
        var len = data.length;
        for (var i = 0; i < len; i++) {
          var obj = {};
          for (var j in data[i]) {
            // console.log('j222222', j)
            obj[j] = data[i][j];
          }
          arr.push(obj);
        }
        return arr;
      }
    },
    watch: {
      screeningList: function () {
        // console.log('this.screeningList 66666', this.screeningList);
        if (this.screeningList.length) {
          console.log(1111111111)
          this.detailInfo = this.screeningList[0];
          this.$nextTick(() => {
            this._initScroll();
          })
        }
      },
      waitingScreeningList: function () {
        console.log(this.auto_screen);
        console.log(typeof (this.auto_screen));
        // if (this.auto_screen) {
        //     console.log('auto screening')
        //     if (this.waitingScreeningList.length) {
        //         this.screeningList.forEach((item, index) => {
        //             if (item.id == this.waitingScreeningList[0].id) {
        //                 console.log(item, index);
        //                 this.start(this.screeningList[index]);
        //             }
        //         })
        //     }
        // }
      },
      finishScreeningList: function () {
        console.log('finishScreeningList ++++++++++++++++++++++++++++++++')
        if (this.auto_screen) {
          console.log('auto screening')
          if (this.waitingScreeningList.length) {
            this.screeningList.forEach((item, index) => {
              if (item.id == this.waitingScreeningList[0].id) {
                console.log(item, index);
                this.start(this.screeningList[index]);
              }
            })
          }
        }
      }
    },
    mounted() {
      this.$watch('userDetailInfo.identify_num', this.debounce((newQuery) => {
        this.$emit('userDetailInfo.identify_num', newQuery)
        console.log(this.userDetailInfo.identify_num);
        if (this.userDetailInfo.identify_num) {
          axios.get(apiPre + 'users', {params: {identify_num: this.userDetailInfo.identify_num}}).then((res) => {
            console.log('users res', res.data.data)
            if (res.data.data) {
              this.name = res.data.data.name;
              this.gender = res.data.data.gender;
              this.dateValue = res.data.data.birth_date;
              this.birthDate = res.data.data.birth_date;
              this.telephone = res.data.data.phone;
              this.age = res.data.data.age;
              this.history = res.data.data.medical_history;
              this.birthPlace = res.data.data.birth_place.split('/')
            }
          }).catch((err) => {
            console.log('users err', err)
          })
        }
      }, 500))
      console.log('screening mounted');
      this.clientHeight = document.documentElement.clientHeight - 355;
      this.clientWidth = document.documentElement.clientWidth - 100;
      //使用localStorage
      this.auto_screen = window.localStorage.getItem('auto_screen') ? JSON.parse(window.localStorage.getItem('auto_screen')) : false;
      this.waitingScreeningList = JSON.parse(window.localStorage.getItem('waitingScreeningList')) ? JSON.parse(window.localStorage.getItem('waitingScreeningList')) : [];
      console.log('this.waitingScreeningList.length', this.waitingScreeningList.length);
      console.log('this.auto_screen', this.auto_screen)
      if (this.auto_screen && this.waitingScreeningList.length) {
        console.log('this.waitingScreeningList', this.waitingScreeningList);
        this.screeningList.forEach((item, index) => {
          if (item.id == this.waitingScreeningList[0].id) {
            // console.log(item, index);
            this.start(this.screeningList[index]);
          }
        })
      }
      console.log('this.screeningList.length', this.screeningList.length)
      if (this.screeningList.length) {
        console.log('_initScroll')
        this.$nextTick(() => {
          this._initScroll();
        })
        this.detailInfo = this.screeningList[0];
      }
      this.nativePlace = getBirthPlace()
    },
    created() {
      console.log('screening created')
      var _that = this;
      this.screeningList = JSON.parse(window.sessionStorage.getItem('screeningList')) ? JSON.parse(window.sessionStorage.getItem('screeningList')) : [];
      console.log('JSON.PARSE', this.screeningList);
      // _that.screeningList = JSON.parse(window.localStorage.getItem('screeningList'))
      // ipcRender.on('upload', function (event, arg) {
      //     console.log('3dsdasdadsdsd');
      //     _that.addList(arg)
      // })

      // ipcRender.on('getToken', () => {
      //     ipcRender.send('sendToken', window.localStorage.getItem('screeningLogin'));
      // })


      event.$on('getOriginData', (arg) => {
        console.log('getOriginData', arg);
        axios.get(apiPre + 'screeningList').then((res) => {
          // console.log('screeningList', res);
          res.data.data.forEach((item, index) => {
            // console.log('332323ssss', item)
            // console.log('332323index', index)
            item.birth_place = item.birth_place ? '[]' : item.birth_place.split('/');
          })
          this.screeningList = res.data.data.sort(this.compare);
          window.sessionStorage.setItem('screeningList', JSON.stringify(this.screeningList));
          if (this.screeningList.length) {
            console.log('_initScroll')
            this.$nextTick(() => {
              this._initScroll();
            })
            this.detailInfo = this.screeningList[0];
          }
          this.waitingScreeningList = this.deepCopy(this.screeningList);
          window.localStorage.setItem('waitingScreeningList', JSON.stringify(this.waitingScreeningList))
          console.log('this.waitingScreeningList', this.waitingScreeningList);
          console.log('33223333', this.screeningList);
        }).catch((err) => {
          console.log('screeningList', err);
        })
      })

      event.$on('clearScreening', () => {
        console.log('clearScreening111111', this.screeningList);
        var data = this.deepCopy(this.screeningList);
        var len = 0;
        data.forEach((item, index) => {
          console.log(index)
          console.log(item)
          if (item.status == 1) {
            console.log('ddddddddddddd')
            this.screeningList.splice(index - len, 1);
            len++;
          }
        })
        console.log('clearScreening2222222', this.screeningList);
        window.sessionStorage.setItem('screeningList', JSON.stringify(this.screeningList));
      })
    },
    destroyed() {
      console.log('screening restroyed');
      // ipcRender.removeAllListeners('upload');
      event.$off('clearScreening');
      event.$off('getOriginData');
    }
  }
</script>

<style scoped lang="scss">
  .screening2-container {
    font-family: 'Microsoft YaHei';
    font-size: 20px;
    margin: 0 50px;
    background-color: rgba(117, 117, 117, 0.5);
    position: absolute;
    width: 100%;
    top: 350px;
    z-index: -99;
    overflow: hidden;
    .screening2-item {
      display: flex;
      justify-content: space-around;
      font-size: 20px;
      font-family: 'Microsoft YaHei';
      font-weight: bold;
      text-align: center;
      height: 35px;
      line-height: 35px;
      .one {
        flex: 1;
      }
      .two {
        flex: 2;
      }
    }
    .screening2-list {
      &:last-child {
        .right {
          border-bottom: none;
        }
      }
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left {
        flex: 1;
        height: 75px;
        line-height: 75px;
        text-align: center;
        /*background-color: rgb(245, 245, 245);*/
        box-shadow: 5px 5px 5px rgba(207, 207, 207, 0.5);
        background: linear-gradient(rgb(255, 255, 255), rgb(212, 212, 212));
        margin-top: -10px;
        margin-left: -20px;
        span {
          &:first-child {
            color: rgb(169, 72, 102);
          }
          &:last-child {
            font-size: 16px;
          }
        }
      }
      .right {
        flex: 8;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 85px;
        background-color: rgb(245, 245, 245);
        margin-left: 5px;
        border-bottom: 1px solid rgb(208, 208, 208);
        .update-info {
          cursor: pointer;
        }
        .one {
          flex: 1;
        }
        .change-mode:hover {
          cursor: pointer;
        }
        .two {
          flex: 2;
          .start-red {
            color: rgb(169, 72, 102);
          }
          em {
            font-style: normal;
            /*&:nth-child(-n+2) {*/
            /*color: rgb(169, 72, 102);*/
            /*}*/
            &:last-child {
              color: rgb(175, 174, 174);
            }
          }
          em:hover {
            text-decoration: underline;
            cursor: pointer;
          }
          input {
            background-color: rgb(182, 182, 182);
            border: none;
            padding: 0 5px;
            border-radius: 4px;
            font-size: 16px;
          }
          input::-webkit-outer-spin-button,
          input::-webkit-inner-spin-button {
            -webkit-appearance: none;
          }
          input[type='number'] {
            -moz-appearance: textfield;
          }
        }
        .start {
          color: rgb(234, 0, 64);
        }
        .finish {
          color: rgb(79, 199, 130);
        }
        .screening {
          color: rgb(213, 168, 0);
        }
        span {
          display: inline-block;
          text-align: center;
          margin-left: 15px;
        }
        img {
          width: 60px;
          border-radius: 5px;
        }
      }
    }
  }

  .screening2-listdetail {
    height: 190px;
    background-color: rgb(182, 182, 182);
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5px;
    position: fixed;
    width: 100%;
    top: 159px;
    div {
      background-color: rgb(245, 245, 245);
      height: 160px;
      font-size: 20px;
      font-family: 'Microsoft YaHei';
      max-width: 20%;
      /*min-width: 10%;*/
      img {
        /*width: 130px;*/
        height: 130px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
      }
    }
    .one {
      display: flex;
      align-items: center;
      padding: 0 20px;
      box-shadow: 5px 5px 5px rgba(207, 207, 207, 0.5);
      background: linear-gradient(rgb(255, 255, 255), rgb(212, 212, 212));
      span {
        &:first-child {
          color: rgb(169, 72, 102);
        }
        &:last-child {
          font-size: 16px;
          margin-left: 5px;
        }
      }
    }
    .two {
      background: none;
      text-align: center;
      min-width: 10%;
      /*display: flex;*/
      /*align-items: center;*/
      p {
        text-align: center;
      }
    }
    .three {
      padding: 10px 20px;
      width: 18%;
      box-shadow: 5px 5px 5px rgba(207, 207, 207, 0.5);
      background: linear-gradient(rgb(255, 255, 255), rgb(212, 212, 212));
      span {
        display: block;
        em {
          font-style: normal;
        }
      }
      .start, .detail {
        color: rgb(169, 72, 102);
      }
      .result {
        @extend .start;
        font-weight: bold;
      }
      .start:hover {
        cursor: pointer;
        text-decoration: underline;
      }
      .detail:hover {
        cursor: pointer;
        text-decoration: underline;
      }
      .delete:hover {
        cursor: pointer;
        text-decoration: underline;
      }
      .delete {
        color: rgb(175, 174, 174);
      }
    }
  }

  .screening2-autoupload {
    height: 34px;
    position: absolute;
    top: 125px;
    text-align: right;
    width: 100%;
    font-family: 'Microsoft YaHei';
    font-size: 16px;
    .image-upload {
      position: relative;
      margin-right: 20px;
      span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 100%;
        padding: 0 20px;
      }
      input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 30px;
        /*padding: 0 10px;*/
      }
    }
    .auto-screen {
      margin-right: 20px;
    }
  }

  .screening2-info {
    p {
      /*margin: 20px 0;*/
      display: flex;
      justify-content: space-between;
      margin: 0 15px 15px 15px;
      font-size: 18px;
      span {
        display: inline-block;
        width: 45%;
        em {
          font-style: normal;
          color: rgb(234, 0, 64);
          font-size: 18px;
        }
        input {
          height: 30px;
          line-height: 30px;
          padding: 0 5px;
          border-radius: 4px;
          border: 1px solid #dcdee2;
          display: block;
          width: 100%;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }
        input[type="number"] {
          -moz-appearance: textfield;
        }
      }
      &:last-child {
        display: block;
        span {
          width: 100%;
          input {
            width: 100%;
          }
        }
      }
    }
  }

</style>
